<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Vue3 新增了 Fragment
        1. Vue2 组件根元素有且仅能有一个
        2. Vue3 组件根元素可以有多个


      透传 Attribultes 

        概念：
          1. 传递给组件的属性，如果没有被组件 props 选项声明的话，那么该属性就是一个 Attr
              <Hello initialCount="1" name="张三" age="18" sex="男" />

              {
                props: ['initialCount', 'sex']
              }

              prop: initialCount , sex
              attr: name , age

          2. 
            组件内有一个 $props 对象，里面收集的是所有 prop
            组件内有一个 $attrs 对象，里面收集的是所有 attr
              Vue3 中，组件上绑定的事件没有被 emits 声明的话，该事件也会收集到 $attrs 中
              Vue2 中，组件上绑定的事件，不会被收集到 $attrs 中，而是一个单独的 $listners 中


        特点：

          1. attr 数据，会自动继承到组件的根元素上
              1. 同名属性会覆盖掉， class 与 style 是两个特例，他们是合并的操作
              2. 在组件内可以配置 inheritAttrs: false, 来禁用继承
                  PS: 
                    Vue2 class 与 style 不受控制
                    Vue3 class 与 style 会受控制
              3. Vue3 根元素可以有多个，这时 继承会有问题

                  1. 直接禁用继承
                  2. 主动给要继承的元素设置 v-bind="$attrs"

   -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const Root = {
        data() {
          return {
            fruits: ["Orange", "Apple", "Banana"],
          };
        },

        template: `
          <div>
            <h1>Root</h1>

            <Hello class="box2" style="font-size: 20px" initialCount="1" name="张三" age="18" sex="男" a="1" b="2" @abcd="" @efdl="" />
          </div>
        `,
      };

      const Hello = {
        inheritAttrs: false, // 禁用 attrs 数据的继承

        props: ["initialCount", "sex"],

        emits: ["abcd"],

        data() {
          return {
            count: this.initialCount,
          };
        },

        template: `
          <div name="里斯" class="box1" style="color: red">
            <h2>Hello</h2>
            <button @click="count++">{{ count }}</button>
          </div>

          
          <div v-bind="$attrs"></div>
        `,

        created() {
          console.log("this.$props", this.$props);
          console.log("this.$attrs", this.$attrs);
        },
      };

      // 创建应用实例
      const app = Vue.createApp(Root);

      // 创建全局组件
      app.component("Hello", Hello);

      // 挂载应用到挂载点
      app.mount("#app");
    </script>
  </body>
</html>
